<template>
  <view class="video-contanier">
    <Navbar :title="t('video.title')"> </Navbar>
    <view class="content">
      <view class="title">{{ title }}</view>
      <!-- <view class="time">{{ time }}</view> -->
      <view class="myVideo">
        <video
          id="myVideo"
          :src="videoSrc"
          :show-fullscreen-btn="true"
          @error="videoErrorCallback"
          controls
        ></video>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, onMounted, toRaw, nextTick, computed, watch } from "vue";
import Navbar from "../../components/Navbar.vue";
import api from "../../networks/apis";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const videoSrc = ref("");
const time = ref("");
const title = ref("");
onMounted(() => {
  //   this.videoContext = uni.createVideoContext("myVideo");
  getDemoVideoUrl();
});

const getDemoVideoUrl = async () => {
  const res = await api.getDemoVideoUrlApi({
    language: localStorage.getItem("lang"),
  });
  if (res.code != 0) return;
  videoSrc.value = res.data.view_path || "";
  time.value = res.data.create_time || "";
  title.value = res.data.title || "";
};
const videoErrorCallback = (e) => {
  console.log("error", e?.target?.errMsg);
};
</script>

<style lang="scss" scoped>
.video-contanier {
  width: 750rpx;
  height: 100vh;
  padding-bottom: 85rpx;
  background: linear-gradient(180deg, #040a40 0%, #042e40 0%, #0d1324 100%);
  color: #fff;
  .content {
    margin-top: 35rpx;
    padding: 0 25rpx;
    .time,
    .title {
      margin: 40rpx 0;
    }
    .time {
      color: #aab8b0;
      font-size: 30rpx;
    }
    .myVideo {
      width: 100%;
      height: 450rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      uni-video {
        width: 100%;
      }
    }
  }
}
</style>
